<template>
  <div class="email_container">
    <div class="head_content">
      <img src="../assets/testHead.jpg" alt="">
    </div>
    <div class="Main">
      <div>
        <el-input class="input_toAdress" type="email" v-model="email" placeholder="请输入邮箱地址" prefix-icon="el-icon-message" clearable></el-input>
        <el-input class="input_title" v-model="title" placeholder="请输入邮件标题" type="text" clearable></el-input>
        <el-button @click="send" type="primary" style="margin-left: 40px">发送</el-button>
        <el-button @click="reset" type="info" style="margin-left: 20px">重置</el-button>
        <el-button @click="logout" type="danger" style="margin-left: 20px">退出</el-button>

        <el-card style="height: 450px">
          <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
          </quill-editor>
        </el-card>

      </div>
    </div>
  </div>
</template>

<script>

import { quillEditor } from "vue-quill-editor";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {

  name: "Email",

  data(){
    return{
      email: '',
      title: '',
      content: '',
      editorOption: {}
    }
  },

  components: {
    quillEditor
  },

  methods:{
    send: function(){
      // console.log(this.$store.getters.getUser.id)
      //验证邮箱
      var myReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;

      if(this.content==''){
        return this.$message.error('内容不能为空')
      }

      if(myReg.test(this.email)){
        this.$http.post("/email/sendEmail", {

          "toAddress":this.email,
          "subject":this.title,
          "content":this.content,
          "userId": this.$store.getters.getUser.id

        }).then( res => {
          this.$message.success(res.data.msg)
        })
      }else {
        this.$message.error("邮箱格式不对!");
      }
    },

    reset: function(){
      this.email = ''
      this.title = ''
      this.content = ''
      this.$message('重置成功')
    },

    logout: function (){
      this.$http.get('/user/logout').then(res => {
        console.log(res)
      })
      this.$message.success('退出成功')
      this.$router.push('/login')

    }

  },
  created() {

  }
}
</script>

<style scoped>
.email_container{
  background-color: #2b4b6b;
  height: 100%;
}
.head_content{
  text-align: center;
}
.head_content img{
  border-radius: 50%;
  height: 100px;
  width: 100px;
  margin-top: 35px;
}
.Main{
  margin: 0 auto;

  width: 1000px;
  height: 540px;
  background-color: white;
}
.input_toAdress{
  margin-top: 20px;
  width: 250px;
  margin-left: 20px;
}
.input_title{
  margin-top: 20px;
  width: 400px;
  margin-left: 20px;
}


</style>